<template>
  <div class="a">
    <el-card style="margin: 20px">
      <p>{{ $route.query.obj ? '试题修改' : '试题录入' }}</p>
      <el-divider />
      <!-- 表单区域 -->
      <el-form
        ref="addRef"
        label-width="120px"
        :model="pubForm"
        :rules="pubFormRules"
      >
        <el-form-item label="学科" prop="subjectID">
          <el-select v-model="pubForm.subjectID" placeholder="请选择学科">
            <el-option
              v-for="item in SubjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select v-model="pubForm.catalogID" placeholder="请选择目录">
            <el-option
              v-for="item in DirectorysList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="pubForm.enterpriseID" placeholder="请选择企业">
            <el-option
              v-for="item in CompanyList"
              :key="item.id"
              :label="item.company"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 提示文案 -->
        <el-alert
          v-if="$route.query.obj"
          type="warning"
          :closable="false"
          style="margin-bottom: 15px"
        >
          <i
            class="el-icon-info"
          />地区数据所使用的数据有所差异，编辑时建议重新选择，否则请求可能会失败</el-alert
        >
        <!-- 选择城市和区 -->
        <el-form-item label="城市">
          <!-- 城市 -->
          <el-select v-model="province" style="width: 20px">
            <el-option
              v-for="item in Area"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <!-- 地区 -->
          <el-select v-model="city" style="width: 230px">
            <el-option
              v-for="item in cityQuery"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <!-- 方向 -->
        <el-form-item label="方向" prop="direction">
          <el-input
            v-model="pubForm.direction"
            style="width: 80%"
            placeholder="请输入方向"
          />
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="pubForm.questionType">
            <el-radio :label="'1'">单选</el-radio>
            <el-radio :label="'2'">多选</el-radio>
            <el-radio :label="'3'">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="pubForm.difficulty">
            <el-radio :label="'1'">简单</el-radio>
            <el-radio :label="'2'">一般</el-radio>
            <el-radio :label="'3'">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" style="margin-bottom: 15px">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="pubForm.question" />
        </el-form-item>
        <!-- 添加选项与答案 -->
        <el-form-item v-if="pubForm.questionType !== '3'" label="选项">
          <!-- 单选题 -->
          <div v-if="pubForm.questionType !== '2'" class="Single">
            <div class="options">
              <el-radio v-model="code" label="A">
                A:
                <el-input
                  v-model="titles[0]"
                  placeholder="请输入试题选项内容"
                />
              </el-radio>
            </div>
            <div class="options">
              <el-radio v-model="code" label="B">
                B:
                <el-input
                  v-model="titles[1]"
                  placeholder="请输入试题选项内容"
                />
              </el-radio>
            </div>
            <div class="options">
              <el-radio v-model="code" label="C">
                C:
                <el-input
                  v-model="titles[2]"
                  placeholder="请输入试题选项内容"
                />
              </el-radio>
            </div>
            <div class="options">
              <el-radio v-model="code" label="D">
                D:
                <el-input
                  v-model="titles[3]"
                  placeholder="请输入试题选项内容"
                />
              </el-radio>
            </div>
          </div>
          <!-- 多选题 -->
          <div v-if="pubForm.questionType === '2'" class="Multiple">
            <div class="options">
              <el-checkbox
                v-for="(item, index) in pubForm.options"
                :key="index"
                v-model="item.isRight"
                :label="true"
                name="type"
              >
                {{ item.code }}
                <el-input
                  v-model="item.title"
                  placeholder="请输入试题选项内容"
                  style="width: 160px"
                  size="small"
                />
              </el-checkbox>

              <!-- <el-checked v-model="pubForm.options[0].code" label="A">
                A:
                <el-input
                  v-model="pubForm.options[0].title"
                  placeholder="请输入试题选项内容"
                />
              </el-checked> -->
            </div>
          </div>
          <el-button
            size="small"
            type="danger"
            :disabled="pubForm.questionType !== '2'"
            @click.stop="handleClose"
          >
            +增加选项与答案
          </el-button>
        </el-form-item>

        <el-form-item label="解析视频" style="margin-bottom: 2px">
          <el-input
            v-model="pubForm.videoURL"
            size="small"
            placeholder="请输入解析视频地址"
          />
        </el-form-item>
        <!-- 答案解析富文本 -->
        <el-form-item label="答案解析" style="margin-bottom: 15px">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="pubForm.answer" />
        </el-form-item>
        <el-form-item label="题目备注" prop="remarks">
          <el-input
            v-model="pubForm.remarks"
            type="textarea"
            style="width: 80%"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- 标签组件 -->
        <el-form-item label="试题标签" prop="tags">
          <tag v-model="pubForm.tags" />
        </el-form-item>
        <!-- 按钮操作区域 -->
        <!-- 添加操作按钮 -->
        <el-form-item v-if="!$route.query.obj">
          <el-button @click.stop="pubForm = {}">清空</el-button>
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-form-item>
        <!-- 编辑操作按钮 -->
        <el-form-item v-else>
          <el-button @click.stop="pubForm = {}">清空</el-button>
          <el-button type="primary" @click="handleEdit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { citys } from '@/components/MyCity'
import { getCompanyListAPI } from '@/api/company'
import { getSubjectListAPI, getDirectorysListAPI } from '@/api/subject'
import {
  addQuestionAPI,
  getQuestionInfoAPI,
  editQuestionAPI
} from '@/api/table'
import tag from './components/tag.vue'
export default {
  name: 'Card',
  components: { tag },
  data() {
    return {
      code: '',
      titles: [],
      // 表单数据
      pubForm: {
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        // 标签
        tags: '',
        // 难度
        difficulty: '',
        // 学科id
        subjectID: '',
        // 题型
        // questionType: '',
        // 试题方向
        direction: '',
        // 题干
        question: '',
        // 答案解析
        answer: '',
        // 目录id
        catalogID: '',
        // 企业id
        enterpriseID: '',
        // 省
        province: '',
        // 市
        city: '',
        // company: '',
        // isFamous: '',
        // 备注
        remarks: ''
        // shortName: '',
        // content: ''
      },
      // 企业列表
      CompanyList: [],
      // 学科列表
      SubjectList: [],
      // 目录列表
      DirectorysList: [],
      // 表单校验规则
      pubFormRules: {
        must: [
          {
            required: true,
            message: '此信息必须填写',
            trigger: 'blur'
          }
        ]
      },
      Area: [],
      cityQuery: [],
      areaQuery: [],
      province: '',
      city: '',
      area: ''
    }
  },
  watch: {
    pubForm: {
      async handler(val) {
        if (val.subjectID) {
          this.getDirectorysList()
          const { data } = await getDirectorysListAPI(val.subjectID)
          console.log('目录列表', data.items)
          this.DirectorysList = data.items
        }
      },
      deep: true
    },
    // 监听省级
    province: function (newValue) {
      this.cityQuery = []
      this.shi = ''
      console.log(this.Area)
      this.Area.forEach((item) => {
        if (newValue.label === item.label) {
          this.cityQuery = item.children
          console.log('city', this.cityQuery)
        }
      })
    }
  },
  created() {
    // this.pubForm = {}
    if (this.$route.query.obj) {
      this.getQuestionInfo()
    }
    this.getSubjectList()
    this.getCompanyList()
    // this.getDirectorysList()
    this.Area = citys
  },
  methods: {
    // 修改试题
    async handleEdit() {
      if (this.city !== '' && this.province !== '') {
        this.pubForm.city = this.city.label
        this.pubForm.province = this.province.label
      }
      // 单选判断
      if (this.pubForm.questionType === '1') {
        const arr = []
        const lib = ['A', 'B', 'C', 'D']
        lib.forEach((item, index) => {
          if (item === this.code) {
            arr.push({
              isRight: true,
              code: item,
              title: this.titles[index],
              img: ''
            })
          } else {
            arr.push({
              isRight: false,
              code: item,
              title: this.titles[index],
              img: ''
            })
          }
        })
        this.pubForm.options = arr
      }
      try {
        const resp = await editQuestionAPI(this.pubForm)
        console.log(resp)
        this.$message.success('修改试题成功')
        this.pubForm = {}
        this.$router.push('/list/table')
      } catch (error) {
        console.log(error)
        this.$message.error('请检查数据，地区是否未重新选择')
      }
    },
    // 获取所需编辑试题详情
    async getQuestionInfo() {
      this.pubForm = {}
      try {
        const resp = await getQuestionInfoAPI(this.$route.query.obj)
        console.log(resp)
        this.pubForm = resp.data
        if (this.pubForm === '1') {
          resp.data.options.forEach((item, index) => {
            this.titles.push(item.title)
            if (item.isRight) {
              this.code = item.code
            }
          })
        }
        this.city = resp.data.city
        this.province = resp.data.province
      } catch (error) {
        console.log(error)
        this.$message.error(error)
      }
    },
    // 获取企业列表
    async getCompanyList() {
      const { data } = await getCompanyListAPI()
      // console.log('企业列表', data.items)
      this.CompanyList = data.items
    },
    // 添加试题
    async handleAdd() {
      if (this.city !== '' || this.province !== '') {
        this.pubForm.city = this.city.label
        this.pubForm.province = this.province.label
      }
      // 单选判断
      if (this.pubForm.questionType === '1') {
        this.pubForm.options = []
        const arr = []
        const lib = ['A', 'B', 'C', 'D']
        lib.forEach((item, index) => {
          if (item === this.code) {
            arr.push({
              isRight: true,
              code: item,
              title: this.titles[index],
              img: ''
            })
          } else {
            arr.push({
              isRight: false,
              code: item,
              title: this.titles[index],
              img: ''
            })
          }
        })
        this.pubForm.options = arr
      }

      const resp = await addQuestionAPI(this.pubForm)
      console.log(resp)
      this.$message.success('添加试题成功')
      this.pubForm = {}
      this.$router.push('/list/table')
    },
    // 获取目录列表
    async getDirectorysList() {
      // this.pubForm.catalogID = ''
      this.DirectorysList = []
    },
    // 获取学科列表
    async getSubjectList() {
      const { data } = await getSubjectListAPI()
      // console.log('学科列表', data.items)
      this.SubjectList = data.items
    }
  }
}
</script>

<style lang="scss" scoped>
.options {
  margin-bottom: 10px;
}
// 设置富文本编辑器的默认最小高度
::v-deep .ql-editor {
  min-height: 300px;
}
::v-deep .el-input {
  width: 350px;
}
</style>
